<template>
  <div class="mainmargin">
    <!-- 这里是搜索 -->
    <div>
    <form action="/">
    <van-search
      v-model="value"
      shape="round"
      background="rgba(255, 255, 255, 1)"
      placeholder="搜索演出"
       show-action
    >
    <template #action>
      <div  @click="onLocation">
          <img id="u2241_img" class="img " src="https://cdn7.axureshop.com/demo/1564251/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u993.png">
          <span>北京</span>
      </div>
    </template>
    </van-search>
    </form>
    </div>

    <!-- 这里是轮播图 -->
  <div>
    <carousel></carousel>
  </div>

  <!-- 以下为金刚区 -->
  <!-- <div class="categoryIcon">
      <van-grid :gutter="10" :border="false">
        <van-grid-item v-for="item in category" :key="item.name">
          <div class="circle-background">
               <van-image :src="item.img" ></van-image>
               <div class="image-text">{{item.name}}</div>
          </div>
        </van-grid-item>
      </van-grid> 
  </div> -->
    <category-icon :category="category"></category-icon>

  <!-- 以下为热门演出 -->
  <div>
        <home-title :title="hittitle">
            <template v-slot:jumpto>
              <router-link to="/show">查看全部</router-link>
            </template>
        </home-title>
      <image-slider
        :images="hitshow"
        :imageWidth="hitshowsize[0]"
        :imageHeight="hitshowsize[1]"
        >
        <template #default="{item}">
          <div class="hitshowtext">
            <div class="name">{{item.name}}</div>
            <div class="type">{{item.type}}</div>
          </div>
      </template>
      </image-slider>
  </div>

  <!-- 以下为精选专题 -->
  <div>
    <div  class="container">
    <!-- <home-title :title="selecTedopicTitle"></home-title> -->
      <home-title :title="selecTedopicTitle">
        <template v-slot:jumpto>
            <router-link to="/selectedtopic">查看全部</router-link>
         </template>
      </home-title>

    <image-slider
      imgtype="selecTedopicType"
      :images="selecTedopic"
      :imageWidth="selecTedopicsize[0]"
      :imageHeight="selecTedopicsize[1]"
      >
      <template #default="{item}">
      <div class="seltext">
        <div class="name">{{item.name}}</div>
        <div class="type">{{item.type}}</div>
      </div>
      </template>
    </image-slider>
    </div>
  </div>

  <!--以下为热门艺人 -->
    <div>
      <!-- <home-title :title="hotArtistTitle"></home-title> -->
      <home-title :title="hotArtistTitle">
        <template v-slot:jumpto>
            <router-link to="/hotartist">查看全部</router-link>
         </template>
      </home-title>
      <div class="hotartist">
        <image-slider
          :images="hotArtist"
          :imageWidth="hotArtistsize[0]"
          :imageHeight="hotArtistsize[1]"
          imgtype="hotArtisttype"
          >
          <template #default="{item}">
            <div class="name">{{item.name}}</div>
            <div class="type">{{item.type}}</div>
          </template>
        </image-slider>
      </div>
  </div>

  <!-- 以下为为你推荐 -->
  <div>
    <home-title :title="recommend"></home-title>
    <tabu-lated></tabu-lated>
  </div>
  
  </div>
</template>

<script>
import { Swipe } from 'vant'
import homeTitle from './ul/homeTitle.vue'
import ImageSlider from './ul/ImageSlider.vue';
import TabuLated from "../show/ui/tabulated.vue" 
// homeDataApi
import {homeDataApi} from '../../api/homeDataApi.js'

import carousel from './ul/carousel.vue'
import categoryIcon from './ul/categoryIcon.vue'
export default {
  components: {
    homeTitle,
    ImageSlider,
    TabuLated,
    carousel,
    categoryIcon
  },

  data() {
    return {
      value:null,
      requestdata:['category','hotArtist','hitshow','selecTedopic'],
      requestdataname:[this.category,this.hotArtist,this.hitshow,this.selecTedopic],
      category:[],
      hitshow:[],
      hitshowsize:['3.73333rem','4.8rem'],
      hittitle:['热门演出','rgba(40, 208, 148, 0.2)'],
      selecTedopic:[],
      selecTedopicTitle:['精选专题','rgba(255, 98, 98, 0.0980392156862745)'],
      selecTedopicsize:['8.4rem','4.26666rem'],
      hotArtist:[],
      hotArtistsize:['2.13333rem','2.13333rem'],
      hotArtistTitle:['热门艺人','rgba(102, 110, 232, 0.2)'],
      recommend:['为你推荐',"rgba(255, 199, 28, 0.2)"]
    }
  },
    mounted() {
    this.fetchData();
  },


  methods: {
    onLocation() {
      console.log('onLocation');
    },
    async fetchData() {
      try {
        for(let i = 0;i<this.requestdata.length;i++){
          const params = this.requestdata[i]
          const data = await homeDataApi(params);
          this.requestdata[i]=data
          // console.log( this.requestdata[i]);
          if( i==0){
            this.category=this.requestdata[i]
          }else if(i==1){
            this.hotArtist=this.requestdata[i]
          }else if(i==2){
            this.hitshow=this.requestdata[i]
          }else if(i==3){
            this.selecTedopic=this.requestdata[i]
          }
        }
      } catch (error) {
        console.log(error);
      }
    }
  },
}
</script>

<style lang="scss" scoped>
  .mainmargin{
    margin:0.26666rem;
    margin-bottom :1.3333rem;;
  }


  //以下为分类按钮样式


    // 以下为热门演出的样式
  .hitshowtext{
      .name {
        margin-top: 10px;
        font-weight: bold;
      }
    .type {
      margin-top: 5px;
    }
  }

  // 以下为精选专题样式
  .seltext{
    position: relative;
    .name {
      position: absolute;
      top: 80px;
      left: 30px;
      color: white;
      // 显示在上层
      z-index: 3;
      font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
      font-weight: 500;
      font-style: normal;
      font-size: 18px;
    }
    .type {
      background-color: white;
      position: relative;
      width: 53px;
      height: 24px;
      font-size: 12px;
      font-family: 'PingFangSC-Light', 'PingFang SC Light', 'PingFang SC';
      font-weight: 200;
      border-radius: 3px;
      font-style: normal;
      text-align: center;
      top: -120px;
      left:30px
    }
  }

  // 以下为热门艺人样式
  .hotartist{
    ::v-deep .image-slider{
      img{
         border-radius: 10px;
      }
      .name{
          text-align: center;
          margin-left: 0.3rem;
          font-family: 'PingFangSC-Regular', 'PingFang SC';
          font-weight: 400;
          font-style: normal;
          font-size: 14px;
          text-align: left;
      }
    }
  }


</style>
